<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>盖世数据智能分析平台</title>
  <link href="http://editor.aibot.gasgoo.com/libs/font-awesome.min.css" rel="stylesheet">
  <!-- 引入 markdown-it 用于 markdown 解析 -->
  <script src="http://editor.aibot.gasgoo.com/libs/marked.umd.js"></script>

  <!-- tts -->
  <script src="http://editor.aibot.gasgoo.com/libs/base64.js"></script>
  <script src="http://editor.aibot.gasgoo.com/libs/crypto-js.js"></script>
  <script src="http://editor.aibot.gasgoo.com/tts/index.umd.js"></script>
  <script src="http://editor.aibot.gasgoo.com/tts/tts.js"></script>

  <style>
    /* 基础样式重置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #0f172a;
      position: relative;
    }

    /* 主容器 - 支持两栏布局 */
    .main-container {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* 顶部导航栏 */
    .top-nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: rgba(15, 23, 42, 0.8);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(59, 130, 246, 0.2);
      z-index: 1000;
      padding: 0 30px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo {
      font-size: 18px;
      font-weight: 600;
      color: #3b82f6;
      text-decoration: none;
      display: flex;
      align-items: center;
    }

    .logo i {
      margin-right: 10px;
      font-size: 20px;
    }

    .nav-menu {
      display: flex;
      list-style: none;
      gap: 5px;
    }

    .nav-item {
      position: relative;
    }

    .nav-link {
      display: flex;
      align-items: center;
      padding: 8px 16px;
      color: #94a3b8;
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      border-radius: 6px;
      transition: all 0.3s ease;
    }

    .nav-link:hover {
      background: rgba(59, 130, 246, 0.1);
      color: #3b82f6;
    }

    .nav-link.active {
      background: rgba(59, 130, 246, 0.2);
      color: #3b82f6;
    }

    .nav-link i {
      margin-right: 8px;
      font-size: 14px;
    }


    /* ========== 2. WebKit 内核浏览器（Chrome/Safari/Edge） ========== */
    /* 滚动条整体宽度 */
    .right-panel::-webkit-scrollbar {
      width: 6px;
      /* 垂直滚动条宽度，保持窄幅不干扰布局 */
    }

    /* 滚动条轨道（背景） */
    .right-panel::-webkit-scrollbar-track {
      background: #1a2540;
      /* 比容器背景稍浅的深蓝色，增强层次 */
      border-radius: 3px;
      /* 圆角与滑块呼应 */
    }

    /* 滚动条滑块（核心视觉） */
    .right-panel::-webkit-scrollbar-thumb {
      background: #4a6fa5;
      /* 浅蓝滑块，与界面内数据色（如“7,807”“22%”）协调 */
      border-radius: 3px;
      /* 圆角优化视觉 */
      transition: background 0.2s ease;
      /* hover 过渡更丝滑 */
    }

    /* 滑块 hover 状态（增强交互反馈） */
    .right-panel::-webkit-scrollbar-thumb:hover {
      background: #6a8fc5;
      /* 更深的蓝色，hover 时更醒目 */
    }


    /* ========== 3. Firefox 浏览器（专属属性） ========== */
    .right-panel {
      scrollbar-width: thin;
      /* 窄滚动条，与 WebKit 视觉统一 */
      scrollbar-color: #4a6fa5 #1a2540;
      /* 滑块色（前） + 轨道色（后），与 WebKit 一致 */
    }

    /* 左侧区域 - 优化布局 */
    .left-panel {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      padding: 30px;
      transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 10;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    /* 右侧分析报告区域 - 优化布局和过渡 */
    .right-panel {
      width: 0;
      height: calc(100%-60px);
      background: rgba(15, 23, 42, 0.95);
      backdrop-filter: blur(16px);
      border-left: 1px solid rgba(59, 130, 246, 0.2);
      overflow-y: auto;
      padding: 0;
      transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 15;
      display: flex;
      flex-direction: column;
      opacity: 0;
      /* 初始透明 */
      transform: translateX(20px);
      /* 初始偏移 */
      box-shadow: -5px 0 30px rgba(0, 0, 0, 0.2);
      /* 添加阴影增强层次感 */
    }

    /* 两栏布局激活状态 - 优化比例为45/55，更突出分析报告 */
    .two-columns .left-panel {
      width: 45%;
      padding: 30px;
      justify-content: flex-start;
    }

    .two-columns .right-panel {
      width: 55%;
      padding: 0 30px;
      opacity: 1;
      /* 完全显示 */
      margin-top: 60px;
      transform: translateX(0);
      /* 移除偏移 */
    }

    /* 分析报告标题栏 - 增强视觉效果 */
    .report-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
      padding-bottom: 15px;
      border-bottom: 1px solid rgba(59, 130, 246, 0.15);
      position: sticky;
      top: 0;
      background: rgba(15, 23, 42, 0.98);
      backdrop-filter: blur(16px);
      z-index: 20;
      padding-top: 10px;
    }

    .report-title {
      font-size: 1.5rem;
      background: linear-gradient(90deg, #3b82f6, #8b5cf6);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-weight: 600;
    }

    .close-report {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(30, 41, 59, 0.6);
      border: 1px solid rgba(59, 130, 246, 0.15);
      color: #94a3b8;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .close-report:hover {
      background: rgba(59, 130, 246, 0.15);
      color: #e2e8f0;
      transform: rotate(90deg);
    }

    /* 分析报告内容区域 - 优化结构和间距 */
    .report-content {
      flex-grow: 1;
      color: #e2e8f0;
      line-height: 1.8;
      font-size: 1rem;
      padding-right: 10px;
      padding-bottom: 50px;
      /* 为滚动条预留空间 */
    }

    .report-content ul,
    ol {
      margin-left: 20px;
    }

    /* 辉光效果 */
    .glow-effect {
      position: absolute;
      filter: blur(150px);
      z-index: 0;
      opacity: 0.2;
    }

    .glow-primary {
      background: radial-gradient(circle, #3b82f6, transparent 70%);
      width: 1000px;
      height: 1000px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: pulse 25s infinite alternate;
    }

    @keyframes pulse {
      0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.15;
      }

      100% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0.3;
      }
    }

    /* 中心内容 - 优化在两栏布局中的显示 */
    .center-content {
      position: relative;
      text-align: center;
      z-index: 10;
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
      padding: 30px;
      background: rgba(15, 23, 42, 0.7);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(59, 130, 246, 0.15);
      border-radius: 20px;
      box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
      transition: all 0.5s ease;
    }

    /* 两栏布局时优化左侧内容 */
    .two-columns .center-content {
      margin: auto;
      border: none;
      box-shadow: none;
      background: transparent;
      backdrop-filter: none;
      padding: 20px 0;
    }

    .center-content h1 {
      font-size: clamp(2rem, 5vw, 3.5rem);
      background: linear-gradient(90deg, #3b82f6, #8b5cf6);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-bottom: 20px;
      text-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
    }

    .center-content p {
      color: #94a3b8;
      font-size: 1.1rem;
      margin-bottom: 30px;
      line-height: 1.6;
    }

    /* 搜索区域 - 优化居中显示 */
    .search-container {
      margin-bottom: 30px;
      position: relative;
      width: 100%;
      max-width: 800px;
      margin: 0 auto 30px;
    }

    .search-box {
      width: 100%;
      padding: 15px 20px;
      padding-right: 100px;
      background: rgba(30, 41, 59, 0.8);
      border: 1px solid rgba(59, 130, 246, 0.2);
      border-radius: 12px;
      color: #e2e8f0;
      font-size: 1rem;
      outline: none;
      transition: all 0.3s ease;
    }

    .search-box:focus {
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .search-button {
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translateY(-50%);
      padding: 10px 20px;
      background: linear-gradient(90deg, #3b82f6, #8b5cf6);
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 500;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .search-button:hover {
      transform: translateY(-50%) scale(1.05);
      box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    }

    /* 搜索过程展示 */
    .search-process {
      background: rgba(30, 41, 59, 0.6);
      border: 1px solid rgba(59, 130, 246, 0.15);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 30px;
      color: #e2e8f0;
      text-align: left;
      display: none;
    }

    .search-process.visible {
      display: block;
      animation: fadeIn 0.5s ease;
    }

    .process-step {
      display: flex;
      align-items: flex-start;
      margin-bottom: 15px;
      opacity: 0.6;
      transition: all 0.3s ease;
    }

    .process-step.active {
      opacity: 1;
      font-weight: 500;
    }

    .process-step.completed {
      opacity: 1;
      color: #93c5fd;
    }

    .process-step:last-child {
      margin-bottom: 0;
    }

    .step-number {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: rgba(59, 130, 246, 0.2);
      color: #93c5fd;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      margin-right: 12px;
      flex-shrink: 0;
    }

    .process-step.completed .step-number {
      background: #10b981;
      color: white;
    }

    .process-step.active .step-number {
      background: #3b82f6;
      color: white;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    }

    .step-content {
      flex-grow: 1;
    }

    .step-title {
      font-size: 0.95rem;
      margin-bottom: 3px;
    }

    .step-details {
      font-size: 0.85rem;
      color: #94a3b8;
    }

    /* AI 回答区域 - 在两栏布局中将被隐藏 */
    .ai-response {
      background: rgba(30, 41, 59, 0.6);
      border: 1px solid rgba(59, 130, 246, 0.15);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 30px;
      color: #e2e8f0;
      text-align: left;
      max-height: 200px;
      overflow-y: auto;
      display: none;
    }

    .ai-response.visible {
      display: block;
      animation: fadeIn 0.5s ease;
    }

    .two-columns .ai-response {
      display: none;
    }

    .ai-response-header {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      font-size: 0.9rem;
      color: #93c5fd;
    }

    .ai-response-header .avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
    }

    .ai-response-content {
      line-height: 1.6;
    }

    /* 统计数据 - 优化位置和响应式表现 */
    .stats-container {
      position: absolute;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 20px;
      z-index: 10;
    }

    .stat-item {
      padding: 15px 20px;
      background: rgba(30, 41, 59, 0.5);
      border: 1px solid rgba(59, 130, 246, 0.1);
      border-radius: 12px;
      min-width: 180px;
      transition: all 0.3s ease;
    }

    .stat-item:hover {
      transform: translateX(-5px);
      box-shadow: 0 10px 30px rgba(59, 130, 246, 0.1);
      border-color: rgba(59, 130, 246, 0.2);
    }

    .stat-item .value {
      font-size: 1.8rem;
      font-weight: bold;
      background: linear-gradient(90deg, #3b82f6, #8b5cf6);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-bottom: 5px;
      transition: all 0.3s ease;
      position: relative;
    }

    .stat-item .value.growing {
      animation: pulse-scale 0.5s ease;
    }

    @keyframes pulse-scale {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.05);
      }

      100% {
        transform: scale(1);
      }
    }

    .stat-item .label {
      font-size: 0.9rem;
      color: #60a5fa;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .status-indicator {
      display: inline-flex;
      align-items: center;
      margin-bottom: 15px;
      color: #60a5fa;
      font-size: 0.9rem;
    }

    .status-indicator .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #10b981;
      margin-right: 8px;
      animation: blink 2s infinite;
    }

    @keyframes blink {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.5;
      }
    }

    .links {
      display: flex;
      gap: 15px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .links a {
      padding: 10px 20px;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 500;
      transition: all 0.3s ease;
      font-size: 0.95rem;
      display: inline-flex;
      align-items: center;
    }

    .links a i {
      margin-right: 8px;
    }

    .links .primary {
      background: linear-gradient(90deg, #3b82f6, #8b5cf6);
      color: white;
      box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
    }

    .links .primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 25px rgba(59, 130, 246, 0.4);
    }

    .links .secondary {
      background: transparent;
      color: #3b82f6;
      border: 1px solid #3b82f6;
    }

    .links .secondary:hover {
      background: rgba(59, 130, 246, 0.1);
      transform: translateY(-2px);
    }

    /* 动态标签样式 */
    .dynamic-tag {
      position: absolute;
      color: #e2e8f0;
      background: rgba(30, 41, 59, 0.6);
      backdrop-filter: blur(8px);
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 13px;
      border: 1px solid rgba(59, 130, 246, 0.2);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      cursor: default;
      transition: all 0.3s ease;
      user-select: none;
      z-index: 5;
      white-space: nowrap;
      opacity: 0;
      transform: translateY(10px) scale(0.95);
    }

    .dynamic-tag.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
      animation: fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
      }

      to {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    .dynamic-tag:hover {
      background: rgba(59, 130, 246, 0.15);
      border-color: rgba(59, 130, 246, 0.4);
      transform: translateY(-3px) scale(1.05);
      box-shadow: 0 6px 20px rgba(59, 130, 246, 0.2);
    }

    .dynamic-tag .tag-source {
      font-size: 10px;
      color: #93c5fd;
      margin-top: 2px;
      opacity: 0.8;
      display: block;
    }

    /* 实时滚动字幕 */
    .ticker-container {
      position: absolute;
      bottom: 30px;
      left: 0;
      width: 100%;
      overflow: hidden;
      z-index: 10;
      padding: 10px 0;
    }

    .ticker {
      display: flex;
      white-space: nowrap;
      animation: ticker 35s linear infinite;
    }

    .ticker-item {
      display: inline-flex;
      align-items: center;
      margin: 0 20px;
      color: #94a3b8;
      font-size: 0.9rem;
      padding: 6px 16px;
      background: rgba(30, 41, 59, 0.4);
      border: 1px solid rgba(59, 130, 246, 0.1);
      border-radius: 20px;
    }

    .ticker-item i {
      margin-right: 8px;
      color: #60a5fa;
      font-size: 0.8rem;
    }

    .ticker-item .highlight {
      color: #38bdf8;
      font-weight: 500;
      margin-left: 5px;
    }

    @keyframes ticker {
      0% {
        transform: translateX(100%);
      }

      100% {
        transform: translateX(-100%);
      }
    }

    /* Canvas 背景 */
    #bgCanvas {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
    }

    /* 加载指示器 */
    .loader {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      background: rgba(30, 41, 59, 0.5);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(59, 130, 246, 0.1);
      border-radius: 20px;
      color: #94a3b8;
      font-size: 0.85rem;
    }

    .loader .spinner {
      width: 12px;
      height: 12px;
      border: 2px solid rgba(59, 130, 246, 0.2);
      border-top-color: #3b82f6;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    /* 搜索加载动画 */
    .search-loading {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 3px solid rgba(255, 255, 255, .3);
      border-radius: 50%;
      border-top-color: white;
      animation: spin 1s ease-in-out infinite;
    }

    /* 响应式调整 - 更精细的断点控制 */
    @media (max-width: 1200px) {

      /* 大屏幕优化 */
      .two-columns .left-panel {
        width: 40%;
      }

      .two-columns .right-panel {
        width: 60%;
      }
    }

    @media (max-width: 1024px) {

      /* 中等屏幕上将统计数据移至顶部 */
      .stats-container {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        flex-direction: row;
        justify-content: center;
        margin-bottom: 30px;
        width: 100%;
      }

      .stat-item {
        min-width: 130px;
        padding: 12px 15px;
      }

      /* 两栏布局在中等屏幕上改为上下布局 */
      .two-columns .left-panel,
      .two-columns .right-panel {
        width: 100%;
        height: auto;
        padding: 20px;
      }

      .two-columns .left-panel {
        max-height: 50%;
        justify-content: center;
      }

      .two-columns .right-panel {
        max-height: 50%;
        border-left: none;
        border-top: 1px solid rgba(59, 130, 246, 0.15);
      }

      /* 调整报告部分高度 */
      .report-chart-container {
        height: 200px;
      }
    }

    @media (max-width: 768px) {
      .center-content {
        padding: 20px;
      }

      .stat-item {
        min-width: 100px;
        padding: 8px 12px;
      }

      .ticker-item {
        margin: 0 10px;
        padding: 5px 10px;
        font-size: 0.8rem;
      }

      .search-button {
        padding: 8px 12px;
      }

      .search-button span {
        display: none;
      }

      .process-step {
        margin-bottom: 10px;
      }

      .step-title {
        font-size: 0.9rem;
      }

      .step-details {
        font-size: 0.8rem;
      }

      /* 移动设备上不使用两栏布局 */
      .two-columns .left-panel,
      .two-columns .right-panel {
        width: 100%;
        height: 100%;
      }

      .two-columns .right-panel {
        position: absolute;
        top: 0;
        right: 0;
        transform: translateX(100%);
        width: 100%;
        height: 100%;
        position: fixed;
      }

      .two-columns .right-panel.visible {
        transform: translateX(0);
      }

      .mobile-report-toggle {
        display: block !important;
      }

      /* 移动设备上报告调整 */
      .report-section {
        padding: 15px;
        margin-bottom: 25px;
      }

      .report-chart-container {
        height: 180px;
      }
    }

    /* 移动端报告切换按钮 */
    .mobile-report-toggle {
      display: none;
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 20;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: linear-gradient(90deg, #3b82f6, #8b5cf6);
      color: white;
      border: none;
      box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
      cursor: pointer;
      font-size: 1.2rem;
      align-items: center;
      justify-content: center;
    }

    iframe {
      width: 100%;
      overflow-x: hidden;
      /* height: 105%; */
      border: none;
    }

    .think {
      max-height: 100px;
      overflow-y: auto;
    }

    .report-content h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin-top: 30px;
    }

    .report-content .loading {
      text-align: center;
      color: #3b82f6;
      font-size: 1.2rem;
      padding: 50px 0;
    }

    .report-content .loading .loading-bar {
      display: inline-block;
      width: 40px;
      height: 6px;
      border-radius: 3px;
      background: #3b82f6;
      animation: loading 1s ease-in-out infinite;
    }

    @keyframes loading {

      0%,
      100% {
        transform: scaleX(1);
        opacity: 1;
      }

      50% {
        transform: scaleX(1.5);
        opacity: 0.5;
      }

      75% {
        transform: scaleX(0.5);
        opacity: 0.2;
      }
    }

    .speech-btn {
      position: absolute;
      right: 54px;
      top: 50%;
      transform: translateY(-50%);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(59, 130, 246, 0.2);
      color: #3b82f6;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .speech-btn:hover {
      background: rgba(59, 130, 246, 0.3);
      box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
      transform: translateY(-50%) scale(1.1);
    }

    .speech-btn i {
      font-size: 1.2rem;
    }

    .ppt-btn {
      position: absolute;
      right: 108px;
      top: 50%;
      transform: translateY(-50%);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(59, 130, 246, 0.2);
      color: #3b82f6;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .ppt-btn:hover {
      background: rgba(59, 130, 246, 0.3);
      box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
      transform: translateY(-50%) scale(1.1);
    }

    .ppt-btn i {
      font-size: 1.2rem;
    }
  </style>
</head>

<body>
  <!-- 顶部导航栏 -->
  <nav class="top-nav">
    <a href="/pages/home.html" class="logo">
      <i class="fa fa-home"></i>
      <span>盖世数据智能分析平台</span>
    </a>
    <ul class="nav-menu">
      <li class="nav-item">
        <a href="/pages/home.html" class="nav-link active">
          <i class="fa fa-home"></i>首页
        </a>
      </li>
      <li class="nav-item">
        <a href="/pages/business/sources.html" class="nav-link">
          <i class="fa fa-globe"></i>抓取源
        </a>
      </li>
      <li class="nav-item">
        <a href="/pages/business/contentManagement.html" class="nav-link">
          <i class="fa fa-file-text"></i>抓取内容
        </a>
      </li>
      <li class="nav-item">
        <a href="/pages/business/analysisList.html" class="nav-link">
          <i class="fa fa-bar-chart"></i>抓取内容分析
        </a>
      </li>
      <li class="nav-item">
        <a href="/pages/business/promptTemplateManagement.html" class="nav-link">
          <i class="fa fa-comment"></i>提示词管理
        </a>
      </li>
      <li class="nav-item">
        <a href="/pages/business/contentPoolManagement.html" class="nav-link">
          <i class="fa fa-file-code-o"></i>内容池管理
        </a>
      </li>
    </ul>
  </nav>

  <!-- 辉光效果 -->
  <div class="glow-effect glow-primary"></div>

  <!-- 主容器，用于两栏布局 -->
  <div class="main-container">
    <!-- 左侧面板 -->
    <div class="left-panel">
      <!-- 辉光效果 -->
      <div class="glow-effect glow-primary"></div>

      <!-- 加载指示器 -->
      <div class="loader">
        <div class="spinner"></div>
        <span>盖世数据同步中...</span>
      </div>

      <!-- 中心内容 -->
      <div class="center-content">
        <div class="status-indicator">
          <div class="dot"></div>
          <span>系统运行正常 - 全球数据源实时监控中</span>
        </div>
        <h1>盖世数据智能分析平台</h1>
        <p>实时监控全球多源数据，智能分析内容趋势，提供精准洞察与决策支持</p>

        <!-- 搜索区域 -->
        <div class="search-container">
          <input type="text" id="search-input" class="search-box" placeholder="请输入您想分析的内容...">
          <button id="search-button" class="search-button">
            <i class="fa fa-search"></i>
            <span>智能分析</span>
          </button>
        </div>

        <!-- 搜索过程展示 -->
        <div id="search-process" class="search-process">
          <div class="process-step active" data-step="1">
            <div class="step-number">1</div>
            <div class="step-content">
              <div class="step-title">数据收集</div>
              <div class="step-details"></div>
            </div>
          </div>
          <div class="process-step" data-step="2">
            <div class="step-number">2</div>
            <div class="step-content">
              <div class="step-title">分析数据</div>
              <div class="step-details"></div>
            </div>
          </div>
          <div class="process-step" data-step="3">
            <div class="step-number">3</div>
            <div class="step-content">
              <div class="step-title">数据分析</div>
              <div class="step-details"></div>
            </div>
          </div>
          <div class="process-step" data-step="4">
            <div class="step-number">4</div>
            <div class="step-content">
              <div class="step-title">数据提取</div>
              <div class="step-details"></div>
            </div>
          </div>
          <div class="process-step" data-step="4">
            <div class="step-number">5</div>
            <div class="step-content">
              <div class="step-title">生成图表内容</div>
              <div class="step-details"></div>
            </div>
          </div>
        </div>

        <!-- AI 回答区域 - 在两栏布局中将被隐藏 -->
        <div id="ai-response" class="ai-response">
          <div class="ai-response-header">
            <div class="avatar"><i class="fa fa-robot"></i></div>
            <span>智能分析助手 · 基于全球数据实时生成</span>
          </div>
          <div class="ai-response-content" id="ai-response-content">
            <!-- AI 回答内容将在这里显示 -->
          </div>
        </div>

        <div class="links">
          <a href="/pages/business/sources.html" class="primary">
            <i class="fa fa-dashboard"></i>抓取源管理
          </a>
          <a href="/pages/business/contentManagement.html" class="secondary">
            <i class="fa fa-history"></i>内容管理
          </a>
          <a href="/pages/business/analysisList.html" class="secondary">
            <i class="fa fa-cog"></i>分析管理
          </a>
        </div>
      </div>
    </div>

    <!-- 右侧分析报告面板 -->
    <div class="right-panel" id="report-panel">
      <div class="report-header">
        <h2 class="report-title" id="report-title">数据分析报告</h2>
        <div class="close-report" id="close-report">
          <i class="fa fa-times"></i>
        </div>
      </div>

      <div class="report-content" id="report-content">
        <!-- 报告内容将在这里显示 -->
      </div>
    </div>
  </div>

  <!-- 移动端报告切换按钮 -->
  <button class="mobile-report-toggle" id="mobile-report-toggle">
    <i class="fa fa-bar-chart"></i>
  </button>

  <!-- 统计数据 -->
  <div class="stats-container">
    <div class="stat-item">
      <div class="value" id="total-sources">148</div>
      <div class="label">全球数据源</div>
    </div>
    <div class="stat-item">
      <div class="value" id="total-items">25,642</div>
      <div class="label">今日抓取</div>
    </div>
    <div class="stat-item">
      <div class="value" id="active-tasks">23</div>
      <div class="label">活跃任务</div>
    </div>
    <div class="stat-item">
      <div class="value" id="processing-speed">1,245</div>
      <div class="label">处理/分钟</div>
    </div>
  </div>

  <!-- 实时滚动字幕 -->
  <div class="ticker-container">
    <div class="ticker" id="ticker">
      <div class="ticker-item"><i class="fa fa-newspaper-o"></i>科技新闻网 <span class="highlight">完成78%</span> - 新发现24条热点内容
      </div>
      <div class="ticker-item"><i class="fa fa-comments"></i>社交媒体平台 <span class="highlight">处理中</span> - 已分析1,245条帖子
      </div>
      <div class="ticker-item"><i class="fa fa-users"></i>行业论坛 <span class="highlight">关键词提取完成</span> - 热门: 人工智能, 数据分析
      </div>
      <div class="ticker-item"><i class="fa fa-shopping-cart"></i>电商平台 <span class="highlight">新任务开始</span> - 目标:
        10,000条用户评论</div>
      <div class="ticker-item"><i class="fa fa-server"></i>系统状态 <span class="highlight">正常</span> - 内存使用率: 35% 负载: 0.87
      </div>
      <!-- 重复一次以确保滚动连续 -->
      <div class="ticker-item"><i class="fa fa-newspaper-o"></i>科技新闻网 <span class="highlight">完成78%</span> - 新发现24条热点内容
      </div>
      <div class="ticker-item"><i class="fa fa-comments"></i>社交媒体平台 <span class="highlight">处理中</span> - 已分析1,245条帖子
      </div>
    </div>
  </div>

  <!-- Canvas 用于绘制背景 -->
  <canvas id="bgCanvas"></canvas>

  <!-- 生成PPT -->
  <div id="ppt-container" style="display:none">
    <div class="close-btn" id="ppt-close-btn">
      <i class="fa fa-times-circle"></i>
    </div>
    <div id="ppt-container-iframe"></div>
  </div>
  <script src="/libs/docmee-ui-sdk-iframe.min.js"></script>
  <style>
    #ppt-container {
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: 999;
        width: 80%;
        max-width: 1440px;
        height: 80%;
        transform: translate(-50%, -50%);
        border-radius: 12px;
        box-shadow: 0 0 12px rgba(120, 120, 120, 0.3);
        overflow: hidden;
        color: white;
        background:rgba(15, 23, 42, 0.98);
    }
    .close-btn{
      position: absolute;
      top: 10px;
      right: 20px;
      font-size: 24px;
      cursor: pointer;
      font-weight: 300px;
    }
    #ppt-container-iframe{
      width: 100%;
      height: 100%;
    }
  </style>

  <script>
    // 请在服务端调用 createApiToken 接口生成token（不同uid生成的token数据相互隔离）
    // 接口文档：https://docmee.cn/open-platform/api#%E5%88%9B%E5%BB%BA%E6%8E%A5%E5%8F%A3-token
        function pptInit(token, value) {

            console.log('pptInit',token,value)

          // 初始化 UI iframe
          const docmeeUI = new DocmeeUI({
            pptId: null,
            token: token, // token
            container: document.querySelector('#ppt-container-iframe'), // 挂载 iframe 的容器
            page: 'creator', // 'creator' 创建页面; 'dashboard' PPT列表; 'customTemplate' 自定义模版; 'editor' 编辑页（需要传pptId字段）
            lang: 'zh', // 国际化
            mode: 'dark', // light 亮色模式, dark 暗色模式
            isMobile: false, // 移动端模式
            hidePdfWatermark: true,
            // background: 'linear-gradient(-157deg,#f57bb0, #867dea)', // 自定义背景
            padding: '40px 20px 0px',
            creatorData: {
              text: value, createNow: true
            },
            onMessage(message) {
              console.log('监听事件', message)
              if (message.type === 'invalid-token') {
                // 在token失效时触发
                console.log('token 认证错误')
                // 更换新的 token
                // let newToken = createApiToken()
                // docmeeUI.updateToken(newToken)
              } else if (message.type === 'beforeGenerate') {
                const { subtype, fields } = message.data
                if (subtype === 'outline') {
                  // 生成大纲前触发
                  console.log('即将生成ppt大纲', fields)
                  return true
                } else if (subtype === 'ppt') {
                  // 生成PPT前触发
                  console.log('即将生成ppt', fields)
                  docmeeUI.sendMessage({
                    type: 'success',
                    content: '继续生成PPT',
                  })
                  return true
                }
              } else if (message.type === 'beforeCreateCustomTemplate') {
                const { file, totalPptCount } = message.data
                // 是否允许用户继续制作PPT
                console.log('用户自定义完整模版，PPT文件：', file.name)
                if (totalPptCount < 2) {
                  console.log('用户积分不足，不允许制作自定义完整模版')
                  return false
                }
                return true
              } else if (message.type == 'pageChange') {
                pageChange(message.data.page)
              } else if (message.type === 'beforeDownload') {
                // 自定义下载PPT的文件名称
                const { id, subject } = message.data
                return `PPT_${subject}.pptx`
              } else if (message.type == 'error') {
                if (message.data.code == 88) {
                  // 创建token传了limit参数可以限制使用次数
                  alert('您的次数已用完')
                } else {
                  alert('发生错误：' + message.data.message)
                }
              }
            },
          })
        }
  </script>
  <script type="module">
    // 固定核心库引入
    import iToolX, { iUpload, iUtils, iEmit } from "http://editor.aibot.gasgoo.com/editor-ui/client.js?a72dfc24ac69ccae7cf363c09e192c19";

    // ========== 1. 初始化 Canvas 背景系统 ==========
    const canvas = document.getElementById('bgCanvas');
    const ctx = canvas.getContext('2d');
    let canvasWidth, canvasHeight;
    let centerX, centerY;

    // 初始化 markdown-it 实例
    function renderMarkdown(content) {
      if (!content) return '';
      try {
        return marked.parse(content);
      } catch (error) {
        console.error('Markdown渲染失败:', error);
        return `<pre>${content}</pre>`;
      }
    }

    // 轨道类
    class Orbit {
      constructor(radius, speed, opacity = 0.15) {
        this.radius = radius;
        this.speed = speed; // 轨道上标签的旋转速度
        this.opacity = opacity;
        this.color = "59, 130, 246"; // 蓝色系
      }

      draw() {
        // 绘制主轨道线
        ctx.beginPath();
        ctx.arc(centerX, centerY, this.radius, 0, Math.PI * 2);
        ctx.strokeStyle = `rgba(${this.color}, ${this.opacity})`;
        ctx.lineWidth = 1;
        ctx.stroke();

        // 绘制轨道标记点
        const markCount = 36;
        for (let i = 0; i < markCount; i++) {
          const angle = (i * (360 / markCount)) * Math.PI / 180;
          const x = centerX + this.radius * Math.cos(angle);
          const y = centerY + this.radius * Math.sin(angle);

          ctx.beginPath();
          ctx.arc(x, y, 1, 0, Math.PI * 2);
          ctx.fillStyle = `rgba(${this.color}, ${this.opacity * 0.7})`;
          ctx.fill();
        }
      }
    }

    // 中心圆类
    class CentralCircle {
      constructor(radius) {
        this.radius = radius;
        this.color = "59, 130, 246"; // 蓝色系
        this.rotation = 0;
        this.speed = 0.0005; // 旋转速度
        this.createTexture();
      }

      createTexture() {
        const textureCanvas = document.createElement('canvas');
        const textureCtx = textureCanvas.getContext('2d');
        const size = this.radius * 2;
        textureCanvas.width = size;
        textureCanvas.height = size;

        // 基础渐变
        const gradient = textureCtx.createRadialGradient(
          size / 2, size / 2, 0,
          size / 2, size / 2, size / 2
        );
        gradient.addColorStop(0, `rgb(${this.color})`);
        gradient.addColorStop(0.6, `rgb(${parseInt(this.color.split(',')[0]) - 30}, ${parseInt(this.color.split(',')[1]) - 30}, ${parseInt(this.color.split(',')[2]) - 30})`);
        gradient.addColorStop(1, `rgb(${parseInt(this.color.split(',')[0]) - 60}, ${parseInt(this.color.split(',')[1]) - 60}, ${parseInt(this.color.split(',')[2]) - 60})`);

        textureCtx.beginPath();
        textureCtx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
        textureCtx.fillStyle = gradient;
        textureCtx.fill();

        // 添加内部纹理
        const lineCount = 24;
        for (let i = 0; i < lineCount; i++) {
          const angle = (i * (360 / lineCount)) * Math.PI / 180;
          const startRadius = size * 0.2;
          const endRadius = size * 0.45;

          const x1 = size / 2 + Math.cos(angle) * startRadius;
          const y1 = size / 2 + Math.sin(angle) * startRadius;
          const x2 = size / 2 + Math.cos(angle) * endRadius;
          const y2 = size / 2 + Math.sin(angle) * endRadius;

          textureCtx.beginPath();
          textureCtx.moveTo(x1, y1);
          textureCtx.lineTo(x2, y2);
          textureCtx.strokeStyle = `rgba(255, 255, 255, 0.15)`;
          textureCtx.lineWidth = 1;
          textureCtx.stroke();
        }

        this.texture = textureCanvas;
      }

      update() {
        this.rotation += this.speed;
      }

      draw() {
        ctx.save();
        ctx.translate(centerX, centerY);
        ctx.rotate(this.rotation);

        // 绘制中心圆
        ctx.drawImage(
          this.texture,
          -this.radius,
          -this.radius,
          this.radius * 2,
          this.radius * 2
        );

        // 绘制发光效果
        ctx.beginPath();
        ctx.arc(0, 0, this.radius * 1.1, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(${this.color}, 0.1)`;
        ctx.fill();

        ctx.restore();
      }
    }

    // 星星类 - 自然的闪烁效果
    class Star {
      constructor() {
        this.reset();
        this.size = Math.random() * 1.2 + 0.2;
        this.alpha = Math.random() * 0.5 + 0.1;
        this.pulse = Math.random() * Math.PI * 2;
        this.pulseSpeed = Math.random() * 0.015 + 0.0005;
        this.flickerPattern = Math.floor(Math.random() * 5);
        this.baseBrightness = Math.random() * 0.4 + 0.1;
        this.suddenFlickerChance = Math.random() * 0.003 + 0.0005;
        this.suddenFlickerStrength = Math.random() * 0.3 + 0.2;

        // 星星颜色变化
        const colorTypes = [
          [255, 255, 255],   // 白色
          [255, 240, 220],   // 暖白色
          [220, 240, 255],   // 冷白色
          [255, 250, 255]    // 微粉色
        ];
        this.color = colorTypes[Math.floor(Math.random() * colorTypes.length)];
      }

      reset() {
        this.x = Math.random() * canvasWidth;
        this.y = Math.random() * canvasHeight;
      }

      update() {
        this.pulse += this.pulseSpeed;

        // 基础闪烁模式
        switch (this.flickerPattern) {
          case 0:
            this.alpha = this.baseBrightness + Math.sin(this.pulse) * 0.08;
            break;
          case 1:
            this.alpha = this.baseBrightness + Math.sin(this.pulse * 1.5) * 0.12;
            break;
          case 2:
            this.alpha = this.baseBrightness + Math.sin(this.pulse * 0.8) * 0.15;
            break;
          case 3:
            this.alpha = this.baseBrightness + Math.sin(this.pulse * 0.3) * 0.05;
            break;
          case 4:
            this.alpha = this.baseBrightness + (Math.random() * 0.15 - 0.075);
            break;
        }

        // 添加偶尔的突然闪烁
        if (Math.random() < this.suddenFlickerChance) {
          this.alpha += this.suddenFlickerStrength;
          // 快速恢复
          setTimeout(() => {
            this.alpha = Math.max(this.baseBrightness, this.alpha - this.suddenFlickerStrength);
          }, Math.random() * 200 + 50);
        }

        // 确保亮度在合理范围内
        this.alpha = Math.max(0.05, Math.min(0.8, this.alpha));

        // 极低概率的短暂消失
        if (Math.random() < 0.0005) {
          const originalAlpha = this.alpha;
          this.alpha = 0;
          setTimeout(() => {
            this.alpha = originalAlpha;
          }, Math.random() * 1500 + 300);
        }

        // 极其罕见的位置微移，模拟大气扰动
        if (Math.random() < 0.001) {
          this.x += (Math.random() - 0.5) * 0.8;
          this.y += (Math.random() - 0.5) * 0.8;
        }
      }

      draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);

        // 创建星星的微小辉光效果
        const gradient = ctx.createRadialGradient(
          this.x, this.y, 0,
          this.x, this.y, this.size * 1.5
        );
        gradient.addColorStop(0, `rgba(${this.color[0]}, ${this.color[1]}, ${this.color[2]}, ${this.alpha})`);
        gradient.addColorStop(0.6, `rgba(${this.color[0]}, ${this.color[1]}, ${this.color[2]}, ${this.alpha * 0.3})`);
        gradient.addColorStop(1, `rgba(${this.color[0]}, ${this.color[1]}, ${this.color[2]}, 0)`);

        ctx.fillStyle = gradient;
        ctx.fill();
      }
    }

    // 标签类 - 管理标签沿轨道运动
    class Tag {
      constructor(text, source, orbit) {
        this.text = text;
        this.source = source;
        this.orbit = orbit;
        this.angle = Math.random() * Math.PI * 2; // 随机初始角度
        this.element = this.createElement();
        this.id = Date.now() + Math.floor(Math.random() * 1000);
        this.updatePosition();
      }

      createElement() {
        const tagElement = document.createElement('div');
        tagElement.className = 'dynamic-tag';
        tagElement.innerHTML = `
          ${this.text}
          <span class="tag-source">${this.source}</span>
        `;
        document.body.appendChild(tagElement);

        // 触发显示动画
        setTimeout(() => {
          tagElement.classList.add('visible');
        }, 100);

        return tagElement;
      }

      update() {
        // 沿轨道移动
        this.angle += 0.001 * this.orbit.speed;
        // 确保角度在0到2π之间循环
        this.angle = (this.angle + Math.PI * 2) % (Math.PI * 2);
        this.updatePosition();
      }

      updatePosition() {
        // 计算圆形轨道上的位置
        const x = centerX + this.orbit.radius * Math.cos(this.angle);
        const y = centerY + this.orbit.radius * Math.sin(this.angle);

        // 设置标签位置
        this.element.style.left = `${x}px`;
        this.element.style.top = `${y}px`;

        // 确保标签始终向上
        this.element.style.transform = 'rotate(0deg)';
      }

      remove() {
        // 添加淡出动画
        this.element.classList.remove('visible');
        setTimeout(() => {
          this.element.remove();
        }, 300);
      }
    }

    // 全局变量
    let centralCircle;
    let orbits = [];
    let tags = [];
    let stars = [];
    const MAX_TAGS = 30; // 最大标签数量

    // 初始化轨道系统
    const initOrbits = () => {
      orbits = [];
      const orbitCount = 4;
      const baseRadius = centralCircle.radius * 2.2;
      const radiusIncrement = centralCircle.radius * 1.2;

      for (let i = 0; i < orbitCount; i++) {
        // 交替旋转方向
        const speed = (i % 2 === 0 ? 1 : -1) * (0.6 + (i * 0.1));
        orbits.push(new Orbit(
          baseRadius + (i * radiusIncrement),
          speed,
          0.15 - (i * 0.02) // 外层轨道更淡
        ));
      }
    };

    // 初始化星星
    const initStars = () => {
      stars = [];
      const starCount = Math.floor((canvasWidth * canvasHeight) / 8000);
      for (let i = 0; i < starCount; i++) {
        stars.push(new Star());
      }
    };

    // 渲染场景
    const renderScene = () => {
      ctx.clearRect(0, 0, canvasWidth, canvasHeight);

      // 绘制星星
      stars.forEach(star => {
        star.update();
        star.draw();
      });

      // 绘制轨道
      orbits.forEach(orbit => orbit.draw());

      // 更新并绘制中心圆
      centralCircle.update();
      centralCircle.draw();

      // 更新标签位置
      tags.forEach(tag => tag.update());

      requestAnimationFrame(renderScene);
    };

    // 调整Canvas尺寸
    const resizeCanvas = () => {
      canvasWidth = window.innerWidth;
      canvasHeight = window.innerHeight;
      canvas.width = canvasWidth;
      canvas.height = canvasHeight;

      // 计算中心位置
      centerX = canvasWidth / 2;
      centerY = canvasHeight / 2;

      // 创建或调整中心圆
      const circleRadius = Math.min(canvasWidth, canvasHeight) / 15;
      if (centralCircle) {
        centralCircle.radius = circleRadius;
        centralCircle.createTexture();
      } else {
        centralCircle = new CentralCircle(circleRadius);
      }

      // 重新初始化轨道和星星
      initOrbits();
      initStars();

      // 重新计算所有标签位置
      tags.forEach(tag => tag.updatePosition());
    };

    // 初始化Canvas
    window.addEventListener('resize', resizeCanvas);
    resizeCanvas(); // 初次初始化
    renderScene();

    // ========== 2. 标签管理与实时推送 ==========
    // 随机选择一个轨道
    function getRandomOrbit() {
      return orbits[Math.floor(Math.random() * orbits.length)];
    }

    // 添加动态标签到随机轨道上
    function addDynamicTag(text, source = '未知来源') {
      // 避免重复添加
      if (tags.some(tag => tag.text === text)) return;

      // 如果标签数量过多，移除最早的
      if (tags.length >= MAX_TAGS) {
        const oldestTag = tags.shift();
        oldestTag.remove();
      }

      // 随机选择一个轨道
      const orbit = getRandomOrbit();

      // 创建并添加标签
      const tag = new Tag(text, source, orbit);
      tags.push(tag);

      // 标签自动消失
      setTimeout(() => {
        const index = tags.findIndex(t => t.id === tag.id);
        if (index !== -1) {
          tags.splice(index, 1);
          tag.remove();
        }
      }, 12000);
    }

    // ========== 3. 统计数据更新 - 增强的数字跳动效果 ==========
    function animateValue(element, start, end, duration) {
      let startTimestamp = null;
      const step = (timestamp) => {
        if (!startTimestamp) startTimestamp = timestamp;
        const progress = Math.min((timestamp - startTimestamp) / duration, 1);

        // 添加弹跳效果
        let easeProgress = progress < 0.5
          ? 4 * progress * progress * progress
          : 1 - Math.pow(-2 * progress + 2, 3) / 2;

        const value = Math.floor(start + easeProgress * (end - start));
        element.textContent = value.toLocaleString();

        if (progress < 1) {
          window.requestAnimationFrame(step);
        } else {
          // 添加完成时的微动画
          element.classList.add('growing');
          setTimeout(() => {
            element.classList.remove('growing');
          }, 500);
        }
      };
      window.requestAnimationFrame(step);
    }

    function updateStats() {
      // 更新全球数据源（缓慢增长）
      const sourcesEl = document.getElementById('total-sources');
      if (Math.random() < 0.1) { // 10%概率增长
        const current = parseInt(sourcesEl.textContent.replace(/,/g, ''));
        const newValue = current + 1;
        animateValue(sourcesEl, current, newValue, 800);
      }

      // 更新今日抓取（快速增长）
      const itemsEl = document.getElementById('total-items');
      const currentItems = parseInt(itemsEl.textContent.replace(/,/g, ''));
      const newItems = currentItems + Math.floor(Math.random() * 15) + 1;
      animateValue(itemsEl, currentItems, newItems, 600);

      // 更新活跃任务（随机波动）
      const tasksEl = document.getElementById('active-tasks');
      if (Math.random() < 0.3) { // 30%概率变化
        const currentTasks = parseInt(tasksEl.textContent.replace(/,/g, ''));
        const change = Math.random() > 0.7 ? 1 : (Math.random() > 0.5 ? -1 : 0);
        const newTasks = Math.max(1, currentTasks + change);
        if (newTasks !== currentTasks) {
          animateValue(tasksEl, currentTasks, newTasks, 500);
        }
      }

      // 更新处理速度（随机波动）
      const speedEl = document.getElementById('processing-speed');
      const currentSpeed = parseInt(speedEl.textContent.replace(/,/g, ''));
      const changeSpeed = (Math.random() > 0.5 ? 1 : -1) * Math.floor(Math.random() * 30);
      const newSpeed = Math.max(800, Math.min(1800, currentSpeed + changeSpeed));
      animateValue(speedEl, currentSpeed, newSpeed, 700);
    }

    // 更频繁地更新统计数据，实现持续跳动效果
    setInterval(updateStats, 2000);

    // ========== 4. 模拟数据推送 ==========
    function startMockDataPush() {
      console.log('启动模拟数据推送');

      // 模拟来源列表
      const sources = ['科技新闻网', '社交媒体平台', '行业论坛', '电商平台', '博客社区', '学术数据库', '政府公开数据'];

      // 模拟关键词/标签文本
      const keywords = [
        '人工智能发展趋势', '数据分析工具', '市场动态', '用户行为分析',
        '竞争情报', '消费趋势', '技术创新', '行业报告',
        '产品评测', '热点事件分析', '用户反馈', '市场份额',
        '算法优化', '数据安全', '云计算应用', '边缘计算',
        '5G技术', '区块链', '物联网', '大数据分析'
      ];

      // 定时推送模拟数据
      setInterval(() => {
        const mockData = {
          text: keywords[Math.floor(Math.random() * keywords.length)],
          source: sources[Math.floor(Math.random() * sources.length)]
        };

        addDynamicTag(mockData.text, mockData.source);
      }, 1500);
    }

    // 启动模拟数据
    startMockDataPush();

    // ========== 5. 搜索功能与AI模拟回答 - 带两栏布局转换 ==========
    // 搜索相关元素
    const searchInput = document.getElementById('search-input');
    const searchButton = document.getElementById('search-button');
    const searchProcess = document.getElementById('search-process');
    const aiResponse = document.getElementById('ai-response');
    const aiResponseContent = document.getElementById('ai-response-content');
    const processSteps = document.querySelectorAll('.process-step');
    const mainContainer = document.querySelector('.main-container');
    const reportPanel = document.getElementById('report-panel');
    const reportTitle = document.getElementById('report-title');
    const reportContent = document.getElementById('report-content');
    const closeReport = document.getElementById('close-report');
    const mobileReportToggle = document.getElementById('mobile-report-toggle');
    const pptContainer = document.getElementById('ppt-container');
    const pptContainerIframe = document.getElementById('ppt-container-iframe');
    const pptCloseBtn = document.getElementById('ppt-close-btn');

    pptCloseBtn.onclick = function(){
        pptContainer.style.display = 'none'
        pptContainerIframe.innerHTML = ''
    }

    // 重置搜索过程
    function resetSearchProcess() {
      searchProcess.classList.remove('visible');
      aiResponse.classList.remove('visible');
      processSteps.forEach(step => {
        step.classList.remove('active', 'completed');
      });
      processSteps[0].classList.add('active');

      // 重置为单栏布局
      mainContainer.classList.remove('two-columns');
      reportPanel.classList.remove('visible');
    }

    // 模拟搜索过程
    function simulateSearchProcess(query, callback) {
      searchProcess.classList.add('visible');
      // 清空并使用打字效果显示回答
      aiResponseContent.textContent = '';
      var index = 0
      var tasks = {}
      var res_content = ''
      var iframe = null
      var iframe_content = ''
      iToolX.flows
        .home_analysis(query)
        .next(item => {
          // pipline:0-分析进度
          if (item.startsWith('pipline:')) {
            // 思考链
            var pipline = item.slice(8)
            var piplineArr = pipline.split(' ')
            pipline = piplineArr[0]
            var piplineContent = ''
            if (piplineArr.length >= 2) {
              piplineContent = piplineArr.slice(1).join(' ')
            } else {
              piplineContent = new Date().toLocaleString().split(' ')[1] + ' ' + (pipline[0] == '0' ? (pipline[1] == '-' ? '正在编辑：' + pipline.slice(2) : '正在进行：' + pipline.slice(2)) : '已编辑完成：' + pipline.slice(2));
            }

            var title = pipline.slice(2).split(' ')[0]
            switch (pipline[0]) {
              case '0':
                if ((tasks[title] == 0 || !!tasks[title]) == false) {
                  tasks[title] = index
                  index++;
                  console.log('tasks[title]', tasks[title], item, title, index)
                }
                processSteps[tasks[title]].classList.add('active');
                processSteps[tasks[title]].querySelector('.step-title').textContent = title
                processSteps[tasks[title]].querySelector('.step-details').textContent = piplineContent;
                break;
              case '1':
                processSteps[tasks[title]].classList.remove('active');
                processSteps[tasks[title]].classList.add('completed');
                break;
              case '2':
                processSteps[tasks[title]].classList.remove('active');
                processSteps[tasks[title]].classList.add('completed');
                processSteps[index].querySelector('.step-details').textContent = '操作失败';
                break;
            }
          } else {

            // 切换到两栏视图
            if (mainContainer.classList.contains('two-columns') == false) {
              mainContainer.classList.add('two-columns');
              reportTitle.textContent = `"${query}" 分析报告`;
            }

            // 显示回答区域（将在两栏布局中隐藏）
            // console.log('item', item)
            // if (aiResponse.classList.contains('visible') == false) {
            //   aiResponse.classList.add('visible');
            // }
            var scrollHeight = reportPanel.scrollHeight
            if (index > 4) {

              // 动态创建一个 iframe 来承载 HTML 内容
              // 并设置 item 为 html 内容
              if(!iframe){
                iframe = document.createElement('iframe');
              }
              iframe_content += item
              const blob = new Blob([iframe_content], { type: 'text/html' });
              iframe.src = URL.createObjectURL(blob);
              iframe.onload = function () {
                this.style.height = (this.contentWindow.document.body.scrollHeight + 50) + 'px';
              };
              reportContent.appendChild(iframe);

            } else {
              res_content += item
              reportContent.innerHTML = renderMarkdown(res_content);
              // think 滚动到底部
              const thinkElements = document.querySelectorAll('div.think');
              if (thinkElements.length > 0) {
                const lastThinkElement = thinkElements[thinkElements.length - 1];
                lastThinkElement.scrollTop = lastThinkElement.scrollHeight;
              }
              // 在reportContent底部插入Loadding动画
              if (reportContent.querySelector('.loading') == null) {
                const loading = document.createElement('div');
                loading.className = 'loading';
                loading.innerHTML = '<div class="loading-bar"></div>';
                reportContent.appendChild(loading);
              }
              reportPanel.scrollTop = scrollHeight;
            }
          }
        })
        .then(res => {
          //   console.log(res)
          // 添加相关标签到轨道
          const keywords = query.split(/\s+/).filter(k => k.length > 1);
          keywords.forEach(keyword => {
            addDynamicTag(keyword, '用户搜索');
          });

          searchProcess.classList.remove('visible');
          searchButton.innerHTML = '<i class="fa fa-search"></i><span>智能分析</span>';

          // 移除Loadding
          const loadingEl = reportContent.querySelector('.loading');
          if (loadingEl) {
            loadingEl.remove();
          }

          // reportContent 添加语音播报按钮，和生成PPT按钮
          if (reportContent.querySelector('.speech-btn') == null) {
            const speechBtn = document.createElement('button');
            speechBtn.className = 'speech-btn';
            speechBtn.innerHTML = '<i class="fa fa-volume-up"></i>';
            speechBtn.onclick = () => {
              var arr = res_content.split('think --></div>')
              controll_tts(`以下是${query}的数据分析报告。\n ${(arr.length > 1 ? arr[1]:arr[0])}`)
            };
            reportTitle.appendChild(speechBtn);
          }
          if (reportContent.querySelector('.ppt-btn') == null) {
            const pptBtn = document.createElement('button');
            pptBtn.className = 'ppt-btn';
            pptBtn.innerHTML = '<i class="fa fa-file-powerpoint-o"></i>';
            pptBtn.onclick = () => {
              // 生成PPT的逻辑
              pptContainer.style.display = ''
              // 生成PPT
                iToolX.flows.getppttoken().then(token => {
                    // -- think --></div>
                    var arr = res_content.split('think --></div>')
                    pptInit(token,arr.length > 1 ? arr[1]:arr[0])
                });
            };
            reportTitle.appendChild(pptBtn);
          }


          // 更新报告标题
          // reportTitle.textContent = `"${query}" 数据分析报告`;

          // const randomData = generateRandomData();
          // // 生成并设置详细报告内容
          // reportContent.innerHTML = generateReportHTML(query, randomData);

          // // 切换到两栏布局
          // mainContainer.classList.add('two-columns');

          // 在移动设备上，默认隐藏报告面板，通过按钮切换
          if (window.innerWidth <= 768) {
            reportPanel.classList.remove('visible');
          } else {
            reportPanel.classList.add('visible');
          }
        })
        .catch(err => {
          console.error(err)
        })
    }

    // 模拟打字效果
    function typeText(element, text, speed = 20, callback) {
      let i = 0;
      element.textContent = '';
      const interval = setInterval(() => {
        if (i < text.length) {
          element.textContent += text.charAt(i);
          i++;
        } else {
          clearInterval(interval);
          if (callback) callback();
        }
      }, speed);
    }

    // 处理搜索
    function handleSearch() {
      const query = searchInput.value.trim().toLowerCase();

      if (!query) {
        alert('请输入搜索内容');
        return;
      }

      // 重置之前的搜索状态
      resetSearchProcess();

      // 显示加载状态
      searchButton.innerHTML = '<div class="search-loading"></div>';

      // 模拟搜索过程
      simulateSearchProcess(query, (item) => {

        // console.log('item', item)

        // 恢复按钮状态
        // searchButton.innerHTML = '<i class="fa fa-search"></i><span>智能分析</span>';
      });
    }

    // 关闭报告，返回单栏布局
    closeReport.addEventListener('click', () => {
      mainContainer.classList.remove('two-columns');
      reportPanel.classList.remove('visible');
    });

    // 移动端报告切换
    mobileReportToggle.addEventListener('click', () => {
      reportPanel.classList.toggle('visible');
    });

    // 绑定搜索事件
    searchButton.addEventListener('click', handleSearch);
    searchInput.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') {
        handleSearch();
      }
    });

    // 响应式处理 - 更精细的断点适配
    window.addEventListener('resize', () => {
      if (mainContainer.classList.contains('two-columns')) {
        // 大屏幕（>1200px）使用40/60比例
        if (window.innerWidth > 1200) {
          document.querySelector('.left-panel').style.width = '40%';
          document.querySelector('.right-panel').style.width = '60%';
        }
        // 中等屏幕（769px-1200px）使用45/55比例
        else if (window.innerWidth > 768) {
          document.querySelector('.left-panel').style.width = '45%';
          document.querySelector('.right-panel').style.width = '55%';
        }
        // 小屏幕（<=768px）使用全屏切换
        else {
          reportPanel.classList.remove('visible');
        }
      }
    });

    // 初始化时触发一次响应式调整
    window.dispatchEvent(new Event('resize'));
  </script>
</body>

</html>